import React, { useState } from "react";
import { Table, Button, Modal, Form, Input, message } from "antd";

const AdoptionRecordsPage = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [editingRecord, setEditingRecord] = useState(null);

  const data = [
    {
      key: "1",
      id: "001",
      reason: "喜欢",
      plan: "每天溜",
      date: "2024-01-01",
      status: "待处理",
    },
    // 其他领养记录数据
  ];

  const columns = [
    {
      title: "序号",
      dataIndex: "key",
      key: "key",
    },
    {
      title: "编号",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "申请理由",
      dataIndex: "reason",
      key: "reason",
    },
    {
      title: "领养计划",
      dataIndex: "plan",
      key: "plan",
    },
    {
      title: "申请日期",
      dataIndex: "date",
      key: "date",
    },
    {
      title: "处理状态",
      dataIndex: "status",
      key: "status",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <>
          <Button onClick={() => console.log("撤销申请", record)}>撤销</Button>
          <Button
            onClick={() => {
              setEditingRecord(record);
              setIsModalVisible(true);
            }}
          >
            编辑
          </Button>
        </>
      ),
    },
  ];

  const handleOpenModal = () => {
    setIsModalVisible(true);
  };

  const handleCloseModal = () => {
    setIsModalVisible(false);
  };

  return (
    <div>
      <h2>宠物领养记录</h2>
      <Table columns={columns} dataSource={data} />
      <Modal
        title="编辑领养记录"
        open={isModalVisible}
        onClose={handleCloseModal}
        footer={[
          <Button key="cancel" onClick={handleCloseModal}>
            取消
          </Button>,
          <Button key="submit" type="primary" onClick={handleCloseModal}>
            提交
          </Button>,
        ]}
      >
        <Form initialValues={editingRecord}>
          <Form.Item
            name="id"
            rules={[{ required: true, message: "请输入宠物编号" }]}
          >
            <Input placeholder="宠物编号" />
          </Form.Item>
          <Form.Item
            name="reason"
            rules={[{ required: true, message: "请输入申请理由" }]}
          >
            <Input placeholder="申请理由" />
          </Form.Item>
          <Form.Item
            name="plan"
            rules={[{ required: true, message: "请输入领养计划" }]}
          >
            <Input placeholder="领养计划" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default AdoptionRecordsPage;
